<template>
  <div class="home-page">
    <header class="header">
        <img :src="Image" alt="快帮帮上线" class="image" />
    </header>

    <div class="page-content">
      <van-row class="content-wrapper">
        <van-col span="24">
          <van-swipe class="my-swipe" :autoplay="3000" >
            <van-swipe-item><img src="@/assets/images/slide1.png" alt="Image 1"></van-swipe-item>
            <van-swipe-item><img src="@/assets/images/slide2.png" alt="Image 2"></van-swipe-item>
            <van-swipe-item><img src="@/assets/images/slide3.png" alt="Image 3"></van-swipe-item>
          </van-swipe>
  
  
        <div class="task-list">
          <div class="task-item task-item-fabu" @click="goToPlaceorderview">
            <img :src="fabu" alt="发布代取"  />
            <div class="task-title" >发布代取</div>
            <img :src="come" alt="右箭头" class="task-come-icon" />
          </div>
          <div class="task-item task-item-lingqu"  @click="goToOrderview">
            <img :src="lingqu" alt="领取代取"/>
            <div class="task-title">领取代取</div>
            <img :src="come" alt="右箭头" class="task-come-icon" />
          </div>
        </div>
        </van-col>
      </van-row>
    </div>
  </div>
</template>
  
  
<script setup lang="ts">
  import { useRouter} from 'vue-router'; 

  import fabu from '../../assets/images/fabu.png';
  import lingqu from '../../assets/images/lingqu.png';
  import Image from "../../assets/images/beijing.png"; 
  import come from "../../assets/images/come.png"; 


  const router = useRouter();
  
  const goToPlaceorderview = () => {
      router.push('/placeorder');
  };
  
  const goToOrderview = () => {
      router.push('/task');
  };

  </script>
  
  
<style lang="less" scoped>

  .home-page {
    font-family: Arial, sans-serif;
    text-align: center;
    color: #333;
    background-color: #fFFFFF;
    height: 100vh;
    display: flex;
    flex-direction: column;
  }

  .header {
    background-color: #ff6150;
    padding: 10px 0;
    color: white;
    text-align: center;
  }

  .image {
    width: 100%; 
    max-width: 600px;
    height: auto;
  }

  .my-swipe .van-swipe-item {
    margin-top: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%; 
    height: 200px; 
  }
  
  .my-swipe img {
    max-width: 100%; 
    max-height: 100%; 
    width: auto; 
    height: auto; 
    border-radius: 10px; /* 设置圆角 */
  }
  
  .content-wrapper {
    background-color: #F8f8f8; 
    border-radius: 20px; 
    width: auto; 
    max-width: 1200px; 
    height: 80%; 
    padding: 20px; 
    z-index: 10; 
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    margin-top: -60px; 
  }

  .task-list {
    display: flex;
    flex-direction: column; /* 纵向排列板块 */
    align-items: center;
    margin-top: 30px;
  }

  .task-item {
    display: flex;
    align-items: center;
    width: 90%; /* 板块宽度 */
    height: 110px; /* 板块高度 */
    padding: 10px;
    margin-top: 15px;
    margin-bottom: 20px;
    box-shadow: 0 4px 8px rgba(237, 237, 237, 0.1);
    border-radius: 15px;
    position: relative; 
  }

  .task-item img:first-child {
    width: 80px; 
    height: 100px; 
    border-radius: 10px;
    margin-right: 60px; 
    margin-left: 20px;
  }

  .task-title {
    color: #ff6150;
    font-size: 28px;
    font-weight: bold;
    text-align: right; 
  }

  .task-come-icon {
    position: absolute; /* 绝对定位 */
    right: 10px; 
    width: 42px; 
    height: 42px; 
  }
  .task-item-fabu {
    background-color: #F6F6ED; /* 发布代取背景色 */
  }

  .task-item-lingqu {
    background-color: #E4EAF2; /* 领取代取背景色 */
  }

</style>
